<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>文明积分 - 新时代文明实践智慧服务系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background: #f5f5f5;
            overflow-x: hidden;
            padding-top: 44px;
            padding-bottom: 60px;
        }
        
        /* 顶部导航栏 */
        .navbar {
            background: linear-gradient(to bottom, #fce4ec 0%, #fff3e0 100%);
            color: #ff6b00;
            height: 44px;
            padding: 0 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            box-shadow: 0 2px 8px rgba(255,107,0,0.2);
        }
        
        .navbar-left {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }
        
        .back-btn {
            font-size: 18px;
        }
        
        .navbar-title {
            font-size: 16px;
            font-weight: bold;
        }
        
        .navbar-right {
            font-size: 18px;
            cursor: pointer;
        }
        
        /* 排行榜分类 */
        .ranking-tabs {
            background: white;
            margin: 15px;
            border-radius: 16px;
            padding: 5px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            display: flex;
            gap: 5px;
        }
        
        .ranking-tab {
            flex: 1;
            text-align: center;
            padding: 10px;
            border-radius: 12px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s;
            color: #666;
        }
        
        .ranking-tab.active {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
            font-weight: bold;
        }
        
        /* 前三名展示 */
        .top-three {
            background: linear-gradient(135deg, #ffd54f 0%, #ffecb3 100%);
            margin: 0 15px 15px;
            border-radius: 16px;
            padding: 20px;
            color: #ff6b00;
            position: relative;
            overflow: hidden;
        }
        
        .top-three::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            transform: rotate(45deg);
            pointer-events: none;
        }
        
        .top-three-content {
            position: relative;
            z-index: 2;
        }
        
        .top-three-title {
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 20px;
        }
        
        .podium {
            display: flex;
            justify-content: center;
            align-items: end;
            gap: 15px;
        }
        
        .podium-item {
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .podium-item:hover {
            transform: translateY(-5px);
        }
        
        .podium-item.second {
            order: 1;
        }
        
        .podium-item.first {
            order: 2;
        }
        
        .podium-item.third {
            order: 3;
        }
        
        .podium-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin: 0 auto 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            position: relative;
            border: 3px solid rgba(255, 255, 255, 0.3);
        }
        
        .podium-item.first .podium-avatar {
            width: 70px;
            height: 70px;
            font-size: 28px;
            background: linear-gradient(135deg, #ffd700, #ff8c00);
            border-color: #ffd700;
            box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
        }
        
        .podium-item.second .podium-avatar {
            background: linear-gradient(135deg, #c0c0c0, #a8a8a8);
            border-color: #c0c0c0;
        }
        
        .podium-item.third .podium-avatar {
            background: linear-gradient(135deg, #cd7f32, #b8860b);
            border-color: #cd7f32;
        }
        
        .podium-crown {
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 20px;
        }
        
        .podium-rank {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .podium-name {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 3px;
        }
        
        .podium-score {
            font-size: 12px;
            opacity: 0.9;
        }
        
        /* 我的排名 */
        .my-ranking {
            background: white;
            margin: 0 15px 15px;
            border-radius: 16px;
            padding: 15px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            border-left: 4px solid #ff6b00;
        }
        
        .my-ranking-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        
        .my-ranking-title {
            font-size: 14px;
            font-weight: bold;
            color: #ff6b00;
        }
        
        .my-ranking-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .my-ranking-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .my-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 16px;
        }
        
        .my-details {
            display: flex;
            flex-direction: column;
        }
        
        .my-name {
            font-size: 14px;
            font-weight: bold;
            color: #333;
        }
        
        .my-score {
            font-size: 12px;
            color: #666;
        }
        
        .my-rank {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: bold;
        }
        
        /* 排行榜列表 */
        .ranking-list {
            background: white;
            margin: 0 15px 15px;
            border-radius: 16px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        }
        
        .ranking-header {
            padding: 15px 20px;
            border-bottom: 1px solid #f0f2f5;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .ranking-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }
        
        .ranking-date {
            font-size: 12px;
            color: #999;
        }
        
        .ranking-item {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px 20px;
            border-bottom: 1px solid #f0f2f5;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .ranking-item:last-child {
            border-bottom: none;
        }
        
        .ranking-item:hover {
            background: #f8f9fa;
        }
        
        .ranking-number {
            width: 30px;
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }
        
        .ranking-number.top-1 {
            color: #ffd700;
        }
        
        .ranking-number.top-2 {
            color: #c0c0c0;
        }
        
        .ranking-number.top-3 {
            color: #cd7f32;
        }
        
        .ranking-avatar {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
            flex-shrink: 0;
        }
        
        .ranking-info {
            flex: 1;
        }
        
        .ranking-name {
            font-size: 15px;
            font-weight: bold;
            color: #333;
            margin-bottom: 3px;
        }
        
        .ranking-subtitle {
            font-size: 12px;
            color: #999;
        }
        
        .ranking-score {
            text-align: right;
        }
        
        .score-number {
            font-size: 16px;
            font-weight: bold;
            color: #ff6b00;
            margin-bottom: 2px;
        }
        
        .score-unit {
            font-size: 11px;
            color: #999;
        }
        
        .ranking-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #ff4d4f;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            font-size: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* 统计信息 */
        .stats-section {
            background: white;
            margin: 0 15px 15px;
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        }
        
        .stats-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
        
        .stats-item {
            text-align: center;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 12px;
        }
        
        .stats-number {
            font-size: 20px;
            font-weight: bold;
            color: #ff6b00;
            margin-bottom: 5px;
        }
        
        .stats-label {
            font-size: 12px;
            color: #666;
        }
        
        /* 加载更多 */
        .load-more {
            text-align: center;
            padding: 20px;
        }
        
        .load-more-btn {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
            border: none;
            padding: 10px 25px;
            border-radius: 20px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .load-more-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            display: flex;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }
        
        .nav-item {
            flex: 1;
            text-align: center;
            padding: 8px 0;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .nav-icon {
            font-size: 20px;
            margin-bottom: 2px;
        }
        
        .nav-label {
            font-size: 10px;
            color: #999;
        }
        
        .nav-item.active .nav-icon {
            color: #ff6b00;
        }
        
        .nav-item.active .nav-label {
            color: #ff6b00;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="navbar">
        <div class="navbar-left" onclick="goBack()">
            <span class="back-btn">←</span>
            <span class="navbar-title">文明积分</span>
        </div>
        <div class="navbar-right" onclick="showHelp()">
            ❓
        </div>
    </div>
    
    <!-- 排行榜分类 -->
    <div class="ranking-tabs">
        <div class="ranking-tab active" onclick="switchRanking(this, 'points')">积分榜</div>
        <div class="ranking-tab" onclick="switchRanking(this, 'hours')">时长榜</div>
        <div class="ranking-tab" onclick="switchRanking(this, 'activities')">活动榜</div>
        <div class="ranking-tab" onclick="switchRanking(this, 'monthly')">月度榜</div>
    </div>
    
    <!-- 前三名展示 -->
    <div class="top-three">
        <div class="top-three-content">
            <div class="top-three-title">🏆 积分排行榜冠军</div>
            <div class="podium">
                <div class="podium-item second" onclick="viewProfile(2)">
                    <div class="podium-avatar">👩</div>
                    <div class="podium-rank">#2</div>
                    <div class="podium-name">李小美</div>
                    <div class="podium-score">2,180分</div>
                </div>
                
                <div class="podium-item first" onclick="viewProfile(1)">
                    <div class="podium-avatar">
                        <div class="podium-crown">👑</div>
                        👨
                    </div>
                    <div class="podium-rank">#1</div>
                    <div class="podium-name">王志强</div>
                    <div class="podium-score">2,450分</div>
                </div>
                
                <div class="podium-item third" onclick="viewProfile(3)">
                    <div class="podium-avatar">👴</div>
                    <div class="podium-rank">#3</div>
                    <div class="podium-name">刘大爷</div>
                    <div class="podium-score">1,980分</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 我的排名 -->
    <div class="my-ranking">
        <div class="my-ranking-header">
            <span>📊</span>
            <div class="my-ranking-title">我的排名</div>
        </div>
        <div class="my-ranking-content">
            <div class="my-ranking-info">
                <div class="my-avatar">👤</div>
                <div class="my-details">
                    <div class="my-name">张三</div>
                    <div class="my-score">1,250积分 · 48小时服务</div>
                </div>
            </div>
            <div class="my-rank">第8名</div>
        </div>
    </div>
    
    <!-- 统计信息 -->
    <div class="stats-section">
        <div class="stats-title">📈 本月数据统计</div>
        <div class="stats-grid">
            <div class="stats-item">
                <div class="stats-number">1,567</div>
                <div class="stats-label">活跃志愿者</div>
            </div>
            <div class="stats-item">
                <div class="stats-number">8,240h</div>
                <div class="stats-label">累计服务时长</div>
            </div>
            <div class="stats-item">
                <div class="stats-number">236</div>
                <div class="stats-label">开展活动数</div>
            </div>
            <div class="stats-item">
                <div class="stats-number">12,580</div>
                <div class="stats-label">服务受益人次</div>
            </div>
        </div>
    </div>
    
    <!-- 排行榜列表 -->
    <div class="ranking-list" id="rankingList">
        <div class="ranking-header">
            <div class="ranking-title">🏅 积分排行榜</div>
            <div class="ranking-date">更新时间：今天 12:00</div>
        </div>
        
        <div class="ranking-item" onclick="viewProfile(1)">
            <div class="ranking-number top-1">1</div>
            <div class="ranking-avatar">👨</div>
            <div class="ranking-info">
                <div class="ranking-name">王志强</div>
                <div class="ranking-subtitle">金牌志愿者 · 环保小分队队长</div>
            </div>
            <div class="ranking-score">
                <div class="score-number">2,450</div>
                <div class="score-unit">积分</div>
            </div>
        </div>
        
        <div class="ranking-item" onclick="viewProfile(2)">
            <div class="ranking-number top-2">2</div>
            <div class="ranking-avatar">👩</div>
            <div class="ranking-info">
                <div class="ranking-name">李小美</div>
                <div class="ranking-subtitle">金牌志愿者 · 敬老服务队</div>
            </div>
            <div class="ranking-score">
                <div class="score-number">2,180</div>
                <div class="score-unit">积分</div>
            </div>
        </div>
        
        <div class="ranking-item" onclick="viewProfile(3)">
            <div class="ranking-number top-3">3</div>
            <div class="ranking-avatar">👴</div>
            <div class="ranking-info">
                <div class="ranking-name">刘大爷</div>
                <div class="ranking-subtitle">银牌志愿者 · 社区巡逻队</div>
            </div>
            <div class="ranking-score">
                <div class="score-number">1,980</div>
                <div class="score-unit">积分</div>
            </div>
        </div>
        
        <div class="ranking-item" onclick="viewProfile(4)">
            <div class="ranking-number">4</div>
            <div class="ranking-avatar">🧑</div>
            <div class="ranking-info">
                <div class="ranking-name">陈老师</div>
                <div class="ranking-subtitle">银牌志愿者 · 教育宣讲团</div>
            </div>
            <div class="ranking-score">
                <div class="score-number">1,750</div>
                <div class="score-unit">积分</div>
            </div>
        </div>
        
        <div class="ranking-item" onclick="viewProfile(5)">
            <div class="ranking-number">5</div>
            <div class="ranking-avatar">👩</div>
            <div class="ranking-info">
                <div class="ranking-name">赵阿姨</div>
                <div class="ranking-subtitle">银牌志愿者 · 文化活动组</div>
            </div>
            <div class="ranking-score">
                <div class="score-number">1,580</div>
                <div class="score-unit">积分</div>
            </div>
        </div>
        
        <div class="ranking-item" onclick="viewProfile(6)">
            <div class="ranking-number">6</div>
            <div class="ranking-avatar">👨</div>
            <div class="ranking-info">
                <div class="ranking-name">孙医生</div>
                <div class="ranking-subtitle">银牌志愿者 · 健康义诊队</div>
            </div>
            <div class="ranking-score">
                <div class="score-number">1,420</div>
                <div class="score-unit">积分</div>
            </div>
        </div>
        
        <div class="ranking-item" onclick="viewProfile(7)">
            <div class="ranking-number">7</div>
            <div class="ranking-avatar">👩</div>
            <div class="ranking-info">
                <div class="ranking-name">周小姐</div>
                <div class="ranking-subtitle">铜牌志愿者 · 文明交通队</div>
            </div>
            <div class="ranking-score">
                <div class="score-number">1,350</div>
                <div class="score-unit">积分</div>
            </div>
        </div>
        
        <div class="ranking-item" onclick="viewProfile(8)" style="background: #f0f8ff; border: 2px solid #667eea;">
            <div class="ranking-number">8</div>
            <div class="ranking-avatar">👤</div>
            <div class="ranking-info">
                <div class="ranking-name">张三 (我)</div>
                <div class="ranking-subtitle">铜牌志愿者 · 社区服务队</div>
            </div>
            <div class="ranking-score">
                <div class="score-number">1,250</div>
                <div class="score-unit">积分</div>
            </div>
        </div>
        
        <div class="ranking-item" onclick="viewProfile(9)">
            <div class="ranking-number">9</div>
            <div class="ranking-avatar">👨</div>
            <div class="ranking-info">
                <div class="ranking-name">吴大哥</div>
                <div class="ranking-subtitle">铜牌志愿者 · 维修服务队</div>
            </div>
            <div class="ranking-score">
                <div class="score-number">1,180</div>
                <div class="score-unit">积分</div>
            </div>
        </div>
        
        <div class="ranking-item" onclick="viewProfile(10)">
            <div class="ranking-number">10</div>
            <div class="ranking-avatar">👩</div>
            <div class="ranking-info">
                <div class="ranking-name">郑阿姨</div>
                <div class="ranking-subtitle">铜牌志愿者 · 邻里互助组</div>
            </div>
            <div class="ranking-score">
                <div class="score-number">1,080</div>
                <div class="score-unit">积分</div>
            </div>
        </div>
    </div>
    
    <!-- 加载更多 -->
    <div class="load-more">
        <button class="load-more-btn" onclick="loadMore()">查看更多排名</button>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="nav-item" onclick="location.href='index.html'">
            <div class="nav-icon">🏠</div>
            <div class="nav-label">首页</div>
        </div>
        <div class="nav-item" onclick="location.href='venues.html'">
            <div class="nav-icon">📍</div>
            <div class="nav-label">阵地</div>
        </div>
        <div class="nav-item" onclick="location.href='activities.html'">
            <div class="nav-icon">📅</div>
            <div class="nav-label">活动</div>
        </div>
        <div class="nav-item" onclick="location.href='services.html'">
            <div class="nav-icon">🎁</div>
            <div class="nav-label">服务</div>
        </div>
        <div class="nav-item" onclick="location.href='profile.html'">
            <div class="nav-icon">👤</div>
            <div class="nav-label">我的</div>
        </div>
    </div>
    
    <script>
        // 排行榜数据
        const rankingData = {
            points: {
                title: '🏅 积分排行榜',
                top3: [
                    { name: '王志强', score: '2,450分', avatar: '👨' },
                    { name: '李小美', score: '2,180分', avatar: '👩' },
                    { name: '刘大爷', score: '1,980分', avatar: '👴' }
                ],
                list: [
                    { name: '王志强', subtitle: '金牌志愿者 · 环保小分队队长', score: '2,450', unit: '积分' },
                    { name: '李小美', subtitle: '金牌志愿者 · 敬老服务队', score: '2,180', unit: '积分' },
                    // ... 其他数据
                ]
            },
            hours: {
                title: '⏰ 服务时长榜',
                top3: [
                    { name: '刘大爷', score: '156小时', avatar: '👴' },
                    { name: '王志强', score: '145小时', avatar: '👨' },
                    { name: '陈老师', score: '132小时', avatar: '🧑' }
                ]
            },
            activities: {
                title: '📅 活动参与榜',
                top3: [
                    { name: '李小美', score: '45次', avatar: '👩' },
                    { name: '王志强', score: '42次', avatar: '👨' },
                    { name: '赵阿姨', score: '38次', avatar: '👩' }
                ]
            },
            monthly: {
                title: '🗓️ 本月排行榜',
                top3: [
                    { name: '孙医生', score: '280分', avatar: '👨' },
                    { name: '周小姐', score: '260分', avatar: '👩' },
                    { name: '吴大哥', score: '245分', avatar: '👨' }
                ]
            }
        };
        
        // 返回上一页
        function goBack() {
            history.back();
        }
        
        // 切换排行榜
        function switchRanking(element, type) {
            document.querySelectorAll('.ranking-tab').forEach(tab => {
                tab.classList.remove('active');
            });
            element.classList.add('active');
            
            const data = rankingData[type];
            updateTopThree(data.top3, data.title);
            updateMyRanking(type);
        }
        
        // 更新前三名显示
        function updateTopThree(top3Data, title) {
            document.querySelector('.top-three-title').textContent = title;
            
            const podiumItems = document.querySelectorAll('.podium-item');
            const order = [1, 0, 2]; // second, first, third
            
            podiumItems.forEach((item, index) => {
                const dataIndex = order[index];
                const data = top3Data[dataIndex];
                
                item.querySelector('.podium-avatar').innerHTML = 
                    dataIndex === 0 ? `<div class="podium-crown">👑</div>${data.avatar}` : data.avatar;
                item.querySelector('.podium-name').textContent = data.name;
                item.querySelector('.podium-score').textContent = data.score;
            });
        }
        
        // 更新我的排名
        function updateMyRanking(type) {
            const myRankings = {
                points: { rank: '第8名', score: '1,250积分 · 48小时服务' },
                hours: { rank: '第12名', score: '48小时 · 1,250积分' },
                activities: { rank: '第15名', score: '15次活动 · 48小时服务' },
                monthly: { rank: '第6名', score: '180积分 · 本月12小时' }
            };
            
            const data = myRankings[type];
            document.querySelector('.my-rank').textContent = data.rank;
            document.querySelector('.my-score').textContent = data.score;
        }
        
        // 查看用户详情
        function viewProfile(userId) {
            alert(`查看用户详情 ID: ${userId}\n\n功能开发中...\n将显示：\n• 个人信息\n• 志愿历程\n• 获得成就\n• 服务记录`);
        }
        
        // 显示帮助
        function showHelp() {
            alert('排行榜说明\n\n🏅 积分榜：按累计积分排序\n⏰ 时长榜：按服务时长排序\n📅 活动榜：按参与活动次数排序\n🗓️ 月度榜：按本月积分排序\n\n排行榜每日12:00更新\n前三名将获得特殊勋章奖励');
        }
        
        // 加载更多
        function loadMore() {
            alert('加载更多排名\n\n将显示第11-50名志愿者排名\n功能开发中...');
        }
        
        // 页面加载动画
        document.addEventListener('DOMContentLoaded', function() {
            const items = document.querySelectorAll('.ranking-item');
            items.forEach((item, index) => {
                item.style.opacity = '0';
                item.style.transform = 'translateX(-20px)';
                setTimeout(() => {
                    item.style.transition = 'all 0.5s ease';
                    item.style.opacity = '1';
                    item.style.transform = 'translateX(0)';
                }, index * 50);
            });
        });
    </script>
</body>
</html>